<template>
  <div class="ware_list">
    <!-- 头部搜索 -->
    <el-form :inline="true" :model="listFrom" class="demo-form-inline">
      <el-form-item label="医品名称">
        <el-input
          v-model="listFrom.drugsname"
          placeholder="输入医疗品/耗材/药品名称"
        />
      </el-form-item>
      <el-form-item label="医品分类">
        <el-input
          v-model="listFrom.sort"
          placeholder="输入医疗品/耗材/药品分类"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" :icon="Search"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-popconfirm title="确定删除所选账号吗?" @confirm="onDelete()">
          <template #reference>
            <el-button type="info">删除选中</el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border
      stripe
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column property="drugsname" label="医品名称" align="center">
        <template #default="scope">
          <el-input v-if="scope.row.id == showId" v-model="formtable.name" />
        </template>
      </el-table-column>
      <el-table-column property="sort" label="医品分类" align="center">
        <template #default="scope">
          <el-select v-if="scope.row.id == showId" v-model="formtable.sort">
            <el-option label="疫苗类" value="疫苗类" />
            <el-option label="耗材" value="耗材" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="医品图片" align="center">
        <template #default="scope">
          <img
            v-if="scope.row.id != showId"
            class="tableImg"
            :src="scope.row.img"
            alt=""
          />
          <el-upload
            class="avatar-uploader"
            action="http://129.211.169.131:21001/drugs/uploaddrugs"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            v-else="scope.row.id == showId"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column property="type" label="医品规格" align="center">
        <template #default="scope">
          <el-input v-if="scope.row.id == showId" v-model="formtable.type" />
        </template>
      </el-table-column>
      <el-table-column property="count" label="库存数量" align="center">
        <template #default="scope">
          <el-input-number
            v-if="scope.row.id == showId"
            v-model="formtable.count"
          />
        </template>
      </el-table-column>
      <el-table-column property="price" label="医品价格" align="center">
        <template #default="scope">
          <el-input-number
            v-if="scope.row.id == showId"
            v-model="formtable.price"
          />
        </template>
      </el-table-column>
      <el-table-column property="starttime" label="生产日期" align="center">
        <template #default="scope">
          <el-date-picker
            v-if="scope.row.id == showId"
            v-model="formtable.starttime"
            type="date"
          />
        </template>
      </el-table-column>
      <el-table-column property="endtime" label="有效日期" align="center">
        <template #default="scope">
          <el-date-picker
            v-if="scope.row.id == showId"
            v-model="formtable.endtime"
            type="date"
          />
        </template>
      </el-table-column>
      <el-table-column label="账号操作" align="center">
        <template #default="scope">
          <!-- 删除 -->
          <el-popconfirm
            title="确定删除该账号吗?"
            @confirm="deleteAccount(scope.row.id)"
          >
            <template #reference>
              <el-button
                type="danger"
                size="small"
                :icon="Delete"
                v-if="isShow2"
              />
            </template>
          </el-popconfirm>
          <!-- 编辑 -->
          <el-button
            type="primary"
            size="small"
            :icon="Edit"
            @click="editAccount(scope.row)"
            v-if="isShow2"
          />
          <!-- 确定编辑 -->
          <el-button
            type="primary"
            size="small"
            :icon="Check"
            v-if="isShow"
            @click="determine(scope.row.id)"
          />
          <!-- 取消编辑 -->
          <el-button
            type="warning"
            size="small"
            v-if="isShow"
            :icon="Star"
            @click="cancellation(scope.row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="fenyeqi">
      <el-pagination
        v-model:current-page="listFrom.page"
        v-model:page-size="listFrom.size"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, watchEffect, ref } from "vue";
import {
  Delete,
  Edit,
  Search,
  Plus,
  Check,
  Star,
} from "@element-plus/icons-vue";
import dayjs from "dayjs";
import type { UploadProps } from "element-plus";
import {
  drugsListReq,
  drugsSearchReq,
  drugsDelReq,
  drugsBatchdelReq,
  drugsEditReq,
} from "@/api/ware.api";
import { ElMessage } from "element-plus";
// 搜索数据
const listFrom = reactive({
  drugsname: "",
  sort: "",
  page: 1,
  size: 5,
});
// 修改数据
const formtable = reactive({
  name: "",
  sort: "",
  type: "",
  starttime: "",
  endtime: "",
  count: "",
  price: "",
  img: "",
  id: "",
});
//按钮变化开关
const isShow = ref(false);
const isShow2 = ref(true);
// 上传图片值
const imageUrl = ref("");
//上传成功的钩子
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  //   console.log(uploadFile.raw.name, "9999");
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  formtable.img = uploadFile.raw.name;
};
//表格数据
const tableData = ref([]);
// 总数
const total = ref(0);
//批量删除数据
const ids = ref<any>([]);
// 用来判断点击编辑的是哪一行
const showId = ref(0);
// 查询
const onSearch = async () => {
  if (listFrom.drugsname == "" && listFrom.sort == "") {
    ElMessage.error("请至少输入一个搜索条件！");
    return;
  }
  const res = await drugsSearchReq(listFrom);
  //   console.log(res, "999");
  tableData.value = res.data.data;
  tableData.value = tableData.value.map((item) => ({
    ...item,
    starttime: dayjs(item.starttime).format("YYYY-MM-DD"),
    endtime: dayjs(item.endtime).format("YYYY-MM-DD"),
  }));
  total.value = res.data.total;
};
// 批量删除
const onDelete = async () => {
  if (ids.value.length == 0) {
    ElMessage.error("请勾选要删除的账号！");
    return;
  }
  ids.value = JSON.stringify(ids.value);
  const res = await drugsBatchdelReq({ ids: ids.value });
  console.log(res, "888");
  if (res.data.code == 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
  } else {
    ElMessage.error(res.data.msg);
  }
  getListReq();
};
// 批量删除的单选框值
const handleSelectionChange = (val) => {
  console.log(val);
  ids.value = JSON.parse(JSON.stringify(val)).map((item) => item.id);
};
// 单个删除
const deleteAccount = async (id) => {
  const res = await drugsDelReq({ id });
  //   console.log(res, "111");
  if (res.data.code == 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
  } else {
    ElMessage.error(res.data.msg);
  }
  getListReq();
};

// 编辑
const editAccount = (row) => {
  console.log(row);

  showId.value = row.id;
  imageUrl.value = row.img;
  isShow.value = true;
  isShow2.value = false;
  formtable.name = row.drugsname;
  formtable.sort = row.sort;
  formtable.type = row.type;
  formtable.starttime = row.starttime;
  formtable.endtime = row.endtime;
  formtable.count = row.count;
  formtable.price = row.price;
  formtable.id = row.id;
  formtable.img = row.img.split("/").pop();
};
// 确定编辑
const determine = async (id) => {
  if (showId.value == id) {
    const res = await drugsEditReq(formtable);
    if (res.data.code == 1) {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
    } else {
      ElMessage.error(res.data.msg);
    }
    showId.value = 0;
    isShow.value = false;
    isShow2.value = true;
    getListReq();
  } else {
    ElMessage.error("请点击正在编辑那一行的确认按钮！");
  }
};
// 取消编辑
const cancellation = (id) => {
  if (showId.value == id) {
    showId.value = 0;
    isShow.value = false;
    isShow2.value = true;
  } else {
    ElMessage.error("请点击正在编辑那一行的取消按钮！");
  }
};
// 获取列表
const getListReq = async () => {
  const res = await drugsListReq(listFrom);
  //   console.log(res, "222");
  tableData.value = res.data.data;
  tableData.value = tableData.value.map((item) => ({
    ...item,
    starttime: dayjs(item.starttime).format("YYYY-MM-DD"),
    endtime: dayjs(item.endtime).format("YYYY-MM-DD"),
  }));
  total.value = res.data.total;
};
watchEffect(getListReq);
</script>

<style scoped lang="scss">
.ware_list {
  width: 100%;
  height: 100%;
  .tableImg {
    width: 100px;
    height: 100px;
  }
  .fenyeqi {
    margin-top: 20px;
  }
  .avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 10px;
  height: 100px;
  text-align: center;
}
</style>
